<template>
	<view>
		<view class="cell-box" v-for="(item, index) in clients" :key="index">
		    <view class="weui-cell" >
		        <view class="weui-cell__bd">
		            <view>
		                <text style="font-weight: bold">{{ item.name }}</text>
		            </view>
		            <view>
		                <text :class="'sext' + item.sex">{{ item.sex == 1 ? '男' : '女' }}</text>
		                <text style="margin-left: 10rpx">{{ item.age }}周岁</text>
		                <text style="margin-left: 10rpx">{{ item.mobile }}</text>
		            </view>
		        </view>
		        <view class="weui-cell__ft">
		            <text 
						v-if="act === 'select'"
						@click="onClientSelected"
						:data-item="item"
						class="select-btn"
					>
		                选择
		            </text>
		            <text v-else 
					    @click="onRemoveClient" 
						:data-item="item" 
						class="remove-btn"
					>
		                移除
		            </text>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				act:'',
				clients:[]
			}
		},
		onLoad({act}){
			this.act = act 
			if(act === 'select'){
				uni.setNavigationBarTitle({
					title:'请选择服务对象'
				})
			}else {
				uni.setNavigationBarTitle({
					title:'服务对象管理'
				})
			}
			this.loadData()
		},
		methods: {
			async loadData(){
				//获取对象服务信息
				const app = getApp()
				const {data:{clients}} = await app.globalData.utils.request({
					url:'/User/clients'
				})
				this.clients = clients
			},
			//点击选择触发事件
			onClientSelected(e){
				//触发update事件将name值传递给service页面
				uni.$emit("clientName",{client:e.currentTarget.dataset.item})
				//返回上一级页面
				uni.navigateBack()
				
			},
			//点击移除触发事件
			onRemoveClient(){
				
			}
		}
	}
</script>

<style>
	@import  "./index.css";
	.select-btn{
		display: inline-block;
		padding: 15rpx 30rpx;
		border: 1rpx solid #0bb584;
		color: #0bb584;
		font-weight: bold;
		border-radius: 10rpx;
		font-size: 28rpx;
		overflow: hidden;
	}
	
	.remove-btn{
		display: inline-block;
		padding: 15rpx 30rpx;
		border: 1rpx solid #eeeeee;
		color: #f13e6d;
		border-radius: 10rpx;
		font-size: 28rpx;
		overflow: hidden;
	}
</style>
